<script setup>
import Housemore from "./morebody/more-house.vue"
import Map from "./morebody/map.vue"
import { ref,reactive, defineEmits, defineProps, onMounted, watch,getCurrentInstance } from "vue"
import { useRouter, useRoute } from "vue-router"
const { proxy } = getCurrentInstance()

let route = useRoute();

// 接收筛选人数 位置区域 价格
let obj = defineProps(['nums', 'frees', 'areas', 'lowprice', 'highprice'])
console.log(obj.lowprice);

// 地图坐标
let mapres = ref()
let mapdata = (arg) => {
  mapres.value = arg
}

// 总房源数量
let emit = defineEmits()
let houselen = (arg) => {
  emit("houselen", arg)
}
// 心愿单接收
let flag1=ref()
let hid1=reactive({})
let isblock=ref("none")
let isclose2=ref("none")
let wish = (flag, hid) => {
     flag1.value=flag
     hid1=hid
}


watch(flag1,(n,v)=>{
    if(n==false){
      console.log(111);
      isblock.value="block"
    }else{
      light.value=false
    }

}) 
// 点了确认收藏点亮星星
let cinfo=ref("点击收藏")
let light=ref()
let collection =()=>{
   light.value=true
   isblock.value="none"
   
}
// 关闭收藏按钮
let Round=ref("关闭")
let closecoll=()=>{
  light.value=false
  isblock.value="none"
}


</script>
<template>
  <div>
    <div class="top">

    </div>
    <div class="spointbox">
      <div class="shadow"></div>
      <div class="wish">
        <svg @click="close" t="1664941903447" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2600" width="16" height="16">
          <path
            d="M975.069283 746.176494a162.756163 162.756163 0 0 1-230.134685 230.134686L511.97742 743.399162 279.065402 976.31118A162.756163 162.756163 0 0 1 48.930717 746.176494L281.842734 513.241896 48.930717 280.329879a162.688423 162.688423 0 0 1 0-230.112106 162.711003 162.711003 0 0 1 230.134685 0l232.912018 232.889438L744.912018 50.217773a162.711003 162.711003 0 1 1 230.134685 230.112106L742.134686 513.241896l232.934597 232.934598z"
            fill="#1F3645" p-id="2601"></path>
        </svg>
        <div class="messagebox">
            <img :src="hid1.pictrue" alt="" />
        </div>
        <el-row class="mb-4" >
          <el-button @click="closecoll" round>{{Round}}</el-button>
          <el-button @click="collection"  type="info" round>{{cinfo}}</el-button>
        </el-row>
      </div>
      <!-- <div class="isclose1">
        <p>是否取消收藏</p>
        <el-row class="mb-4" >
        <el-button  round>关闭</el-button>
        <el-button   type="info" round>确定</el-button>
      </el-row> -->

      <!-- </div> -->
      <Housemore @mapdata="mapdata" @houselen="houselen" :pepnums="obj.nums" :isfrees="obj.frees" :areas="obj.areas"
        :lowprice="obj.lowprice" :highprice="obj.highprice" @wish="wish" :light="light">
      </Housemore>
      <Map :mapres="mapres"></Map>
    </div>
  </div>
</template>

<style scoped lang="scss">
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.top {
  width: 100%;
  height: 20%;
}

.spointbox {
  /* background-color: aliceblue; */
  position: relative;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  //  .isclose1{
  //   text-align: center;

  //   height: 149px;
  //   width: 266px;
  //   box-shadow: 1px 1px 1px;
  //   border-radius: 5%;
  //   background-color: rgb(245, 239, 239);
  //   position: relative;
  //   left: 39%;
  //   top: 23%;
  //   position: fixed;
  //   display: v-bind(isclose2);
  //   transition: 1s;
  //   z-index: 4;
    
   }
  .wish {
    height: 271px;
    width: 530px;
    box-shadow: 1px 1px 1px;
    border-radius: 5%;
    background-color: rgb(245, 239, 239);
    position: relative;
    left: 31%;
    top: 31%;
    position: fixed;
    display: v-bind(isblock);
    transition: 1s;
    z-index: 4;
    
    svg {
      cursor: pointer;
      position: absolute;
      left: 2%;
      top: 4%;
    }
    .mb-4{
      position: absolute;
      top: 211px;
      left: 183px;
    }
    .messagebox{
      width: 90%;
      height: 51%;
      background-color: aquamarine;
      position: absolute;
      top: 17%;
      left: 5%;
    }

  }

  .shadow {
    background-color: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 46px;
    display: v-bind(isblock);
  }
</style>